<template>
  <van-loading
    type="spinner"
    v-if="!isShow"
    vertical
    size="30px"
    color="#ee0a24"
    style="margin-top: 10vh;"
  >加载中...</van-loading>

  <!-- 标签内部滚动内容（可视滚动区域）-->
  <div class="div-top" v-if="isShow">
    <!-- 下拉刷新 -->
    <van-pull-refresh v-model="pullLoading" success-text="刷新成功~" @refresh="onRefresh">
      <!-- Pc游戏玩家社区 -->
      <head-community-link :tagsConfig="tagsConfig"></head-community-link>

      <!-- 首页Pc游戏tab文章列表（上拉加载更多） -->
      <van-list
        :immediate-check="false"
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <!-- 文章列表样式 -->
        <article-list v-for="(item, index) in list" :textInfo="item" :key="item.id"></article-list>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script setup>
// 公共组件
import ArticleList from '../../../components/articleList/ArticleList.vue'
import HeadCommunityLink from '../../../components/headCommunityLink/headCommunityLink.vue'

import { reactive, ref, onMounted } from 'vue';

import { getPcGameTags, getPcGameArts, getNewPcGameArts } from '../../../network/home.js'

// 暂时传入 HeadCommunityLink 的数据
const tagsConfig = reactive({})
// 文章列表数据
let list = reactive([]);
let isShow = ref(false)
onMounted(() => {
  // 获取顶部tags数据
  getPcGameTags().then(res => {
    tagsConfig.title = res.data.title
    tagsConfig.bgcImgUrl = res.data.bgcImgUrl
    tagsConfig.iconUrl = res.data.iconUrl
    tagsConfig.tagsTitle = res.data.tagsTitle
  })
  // 获取PC游戏文章
  getPcGameArts().then(res => {
    list.push(...res.data)
  })
  setTimeout(() => {
    isShow.value = true
  }, 500)
})

// 触底加载更多
const loading = ref(false);
const finished = ref(false);
const onLoad = () => {
  // 异步更新数据
  setTimeout(() => {
    getPcGameArts().then(res => {
      list.push(...res.data)
      loading.value = false;
    })
  }, 1000)
}
// 下拉刷新
const pullLoading = ref(false);
const onRefresh = () => {
  setTimeout(() => {
    // 添加新文章
    getNewPcGameArts().then(res => {
      // 将最新文章添加到list头部
      list.unshift(...res.data)
    })
    pullLoading.value = false;
  }, 1000);
}

</script>

<style scoped>
</style>
